<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<main>
			<!-- banner图 -->
			<div class="swiper" id="banner">
				<div class="swiper-wrapper">
					<div class="swiper-slide">Slide 1</div>
					<div class="swiper-slide">Slide 2</div>
					<div class="swiper-slide">Slide 3</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<section id="box1">
				<!-- 今日排名 -->
				<div>
					<p>今日排名</p>
					<p><i id="rank">9</i></p>
				</div>
				<!-- 累计打卡 -->
				<div>
					<p>累计打卡 <span id="clockin">23</span> 天</p>
					<button id="clockbtn">今日打卡</button>
				</div>
			</section>
			<section id="box2">
				<!-- 运动数据 -->
				<div>
					<p>运动数据</p>
				</div>
				<!-- 累计运动徽章 -->
				<div>
					<p>累计运动徽章</p>
					<p><i id="badges">3</i> <span>枚</span></p>
				</div>
			</section>
			<section id="box3">
				<!-- 课程训练 -->
				<div>
					<p>课程训练</p>
				</div>
			</section>
			<section id="box4">
				<!-- 户外跑步 -->
				<div>
					<p>户外运动</p>
				</div>
			</section>
		</main>
		<footer id="tapBar"></footer>
	</body>
</html>
